<template>
  <div class="center-bottom-right">
    <div class="block-title"
      ref="blockTitle">
      <p class="title-text-ch">数据中心资产</p>
      <p class="title-text-en">Assets of Big Data Center</p>
    </div>
    <div class="comp-title">
      <comp-title  v-if="dataSet.centerBottom" :text="dataSet.centerBottom.rightData.title"
        ref='compTitle'></comp-title>
    </div>
    <div class="data-content" ref="cbr">
      <div class="chart-box">
        <div ref="chart"
          style="width: 330px;height:238px;"></div>
      </div>
      <div class="legen-box">
        <custom-legend direction='column'
          ref="legen"
          :legens='legens'></custom-legend>
      </div>
    </div>
  </div>
</template>
<script>
import CompTitle from '@/components/common/compTitle.vue'
import CustomLegend from '@/components/common/customLegend.vue'
import { mapState } from 'vuex'
// https://cn.vuejs.org/v2/style-guide/#组件-实例的选项的顺序-推荐
export default {
  name: 'CenterBottomRight',
  components: {
    CompTitle,
    CustomLegend
  },
  model: {},
  props: {},
  data() {
    return {
      legens: [
        {
          name: '本月',
          color: '#00f7fa'
        },
        {
          name: '上月',
          color: '#28a1ff'
        }
      ],
      option: {}
    }
  },
  computed: {
    ...mapState(['dataSet']),
    chartData() {
      if(this.dataSet.centerBottom){
        return this.dataSet.centerBottom.rightData.chartData
      } else {
        return []
      }
    }
  },
  watch: {},
  created() {},
  mounted() {
    this.initOption()
  },
  beforeDestroy() {},
  methods: {
    init() {
      let tl = new TimelineMax({}),
        blockTitle = TweenMax.to(this.$refs.blockTitle, 0.5, {
          opacity: 1,
          scaleX: 1
        }),
        cbr = TweenMax.from(this.$refs.cbr, 0.5, { opacity: 0, height: 0})
      tl.add(blockTitle, 0)
        .add(this.$refs.compTitle.init(), '-=0.2')
        .addLabel('chart', '+=0')
        .add(cbr, 'chart-=0.2')
        .add(this.$refs.legen.init(), 'chart+=0.3')
        .add(this.setChartData, 'chart+=0.5')
      return tl
    },

    initOption() {
      this.chart = this.$echarts.init(this.$refs.chart)
      let option = {
        tooltip: {
          trigger: 'item'
        },
        radar: {
          radius: '68%',
          name: {
            textStyle: {
              color: '#9b9ca7',
              fontSize: 14
            }
          },
          splitNumber: 5,
          splitArea: {
            areaStyle: {
              color: [
                '#0b2d5b',
                '#0b2f5f',
                '#092651',
                '#081a42',
                'rgba(0,0,0,0)'
              ]
            }
          },
          axisLine: {
            lineStyle: {
              width: 2,
              color: '#093271'
            }
          },
          splitLine: {
            lineStyle: {
              width: 2,
              color: '#093271'
            }
          },
          indicator: [
            { name: '重要性', max: 100 },
            { name: '时效性', max: 100 },
            { name: '冗余性', max: 100 },
            { name: '关系评估', max: 100 },
            { name: '使用评估', max: 100 }
          ]
        },

        series: [
          {
            name: '',
            type: 'radar',
            label: {
              normal: {
                show: false,
                textStyle: {
                  color: '#fff'
                }
              }
            },
            tooltip: {
              show: false
            },
            data: [
              {
                value: [100, 100, 100, 100, 100],
                name: 'helper',
                symbolSize: 0,
                lineStyle: {
                  normal: {
                    width: 2,
                    color: {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      colorStops: [
                        {
                          offset: 0,
                          color: 'rgba(3,94,240,1)' // 0% 处的颜色
                        },
                        {
                          offset: 0.3,
                          color: 'rgba(3,94,240,.2)' // 100% 处的颜色
                        },
                        {
                          offset: 0.5,
                          color: 'rgba(3,94,240,.1)' // 100% 处的颜色
                        },
                        {
                          offset: 0.7,
                          color: 'rgba(3,94,240,.2)' // 100% 处的颜色
                        },
                        {
                          offset: 1,
                          color: 'rgba(3,94,240,1)' // 100% 处的颜色
                        }
                      ],
                      global: false // 缺省为 false
                    }
                  }
                },
                itemStyle: {
                  normal: {
                    color: '#00aeef'
                  }
                }
              }
            ]
          },
          {
            name: '本月',
            type: 'radar',
            label: {
              normal: {
                show: false,
                textStyle: {
                  color: '#fff'
                }
              }
            },
            data: [
              {
                value: [],
                name: '',
                symbolSize: 1,
                lineStyle: {
                  normal: {
                    color: '#00f7fa',
                    width: 2
                  }
                },
                areaStyle: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    colorStops: [
                      {
                        offset: 1,
                        color: 'rgba(0,247,250,.4)' // 0% 处的颜色
                      },
                      {
                        offset: 0,
                        color: 'rgba(0,247,250,.2)' // 100% 处的颜色
                      }
                    ],
                    global: false // 缺省为 false
                  }
                },
                itemStyle: {
                  normal: {
                    color: '#00aeef'
                  }
                }
              }
            ]
          },
          {
            name: '上月',
            type: 'radar',
            label: {
              normal: {
                show: false,
                textStyle: {
                  color: '#fff'
                }
              }
            },
            data: [
              {
                value: [],
                name: '',
                symbolSize: 1,
                lineStyle: {
                  normal: {
                    color: '#28a1ff',
                    width: 2
                  }
                },
                areaStyle: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    colorStops: [
                      {
                        offset: 0,
                        color: 'rgba(34,135,219,.6)' // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: 'rgba(34,135,219,.4)' // 100% 处的颜色
                      }
                    ],
                    global: false // 缺省为 false
                  }
                },
                itemStyle: {
                  normal: {
                    color: '#4466f4'
                  }
                }
              }
            ]
          }
        ]
      }
      this.option = option
    },
    setChartData() {
      const len = this.chartData.length
      for (let i = 0; i < len; i++) {
        if (this.chartData[i].name === '上月') {
          this.option.series[2].data[0].value = this.chartData[i].data
        } else if (this.chartData[i].name === '本月') {
          this.option.series[1].data[0].value = this.chartData[i].data
        }
      }
      this.chart.setOption(this.option)
    }
  }
}
</script>
<style lang="scss" scoped>
.center-bottom-right {
  height: 100%;

  color: #fff;
  .block-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    height: 64px;

    background: url(../../../../assets/imgs/center/center_bottom_bg.png)
      no-repeat center;

    opacity: 0;

    text-align: center;

    transform: scaleX(0);
    .title-text-ch {
      text-shadow: 1px 1px 4px #25a0ff, 1px -1px 4px #25a0ff,
        -1px 1px 4px #25a0ff, -1px -1px 3px #25a0ff;

      font-size: 22px;
    }
    .title-text-en {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 14px;
    }
  }
  .comp-title {
    margin-top: 4px;
  }
  .data-content {
    position: relative;

    height: calc(100% - 98px);

    background: linear-gradient(0deg, #035ef01a, transparent),
      linear-gradient(transparent, #2af9fa1a, transparent) no-repeat;
    background-size: 1px 100%;
    .chart-box {
      width: 100%;
      height: 100%;
    }
    .legen-box {
      position: absolute;
      top: 14px;
      right: 14px;
    }
  }
}
</style>